{% stylesheet %}
  .block_album_tab .tab_list {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .block_album_tab .block_title {
    margin-bottom: calc(var(--general_layout_spacing) * var(--title_margin_bottom_scale) - 17px);
  }
  .block_album_tab .tab_list::-webkit-scrollbar {
    display: none;
  }
  .block_album_tab .tab_list li {
    cursor: pointer;
    height: 50px;
    line-height: 50px;
    font-size: calc(var(--title_font_size) * 0.75);
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
    margin: 0 20px;
    position: relative;
    color: #666;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .block_album_tab .tab_list li.active {
    color: var(--title_color);
  }

  .block_album_tab .tab_list li.active::after {
    opacity: 1;
    visibility: visible;
  }

  .block_album_tab .tab_list li::after {
    content: '';
    width: 100%;
    height: 2px;
    background: var(--title_color);
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
  }

  .block_album_tab .tab_content {
    margin-top: calc(var(--general_layout_spacing) * var(--title_margin_bottom_scale));
  }

  .block_album_tab .tab_content .tab_content_list {
    display: none;
    gap: 30px;
    grid-template-columns: repeat(var(--pc-number), minmax(0, 1fr));
  }

  .block_album_tab .tab_content .tab_content_list.active {
    display: grid;
  }

  @media screen and (max-width: 767px) {
    .block_album_tab .block_title {
      margin-bottom: calc(var(--general_layout_spacing) * 0.5 - 17px);
    }
    .block_album_tab .tab_content .tab_content_list {
      gap: 15px;
      grid-template-columns: repeat(var(--wap-number), minmax(0, 1fr));
    }
    .block_album_tab .tab_content {
      margin-top: calc(var(--general_layout_spacing) * 0.5);
    }
    .block_album_tab .tab_list li {
      font-size: 16px;
    }
  }
  .block_album_tab .tab_content .tab_content_list li {
    display: flex;
  }

  .block_album_tab .tab_content .tab_content_list li a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .block_album_tab .tab_content .tab_content_list li a:hover img {
    transform: scale(1.1);
  }

  .block_album_tab .tab_content .tab_content_list li a .collection_img {
    padding-top: 100%;
    width: 100%;
  }

  .block_album_tab .tab_content .tab_content_list li a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    transition: all 0.3s;
  }

  .block_album_tab .tab_content .tab_content_list li a .collection_name {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 24px;
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
  }
{% endstylesheet %}

{% assign data = section.settings %}
{% capture container %}
    {%- if data.is_fill -%}
        full_container_wrapper
    {%- else -%}
        container_wrapper
    {%- endif -%}
{% endcapture %}

{% assign blockId = block_id | default: section.block_id %}

<div class="block_album_tab" id="block_album_tab-{{ blockId }}">
  <div class="{{ container }}">
    {% include 'block_title', title: data.title, detail: data.detail %}
    <div class="content">
      <ul class="tab_list">
        {% if section.blocks.size > 0 %}
          {% for block in section.blocks %}
            <li class="{% if forloop.first == true %}active{% endif %}">
              {{ block.title | default: 'TAB' }}
            </li>
          {% endfor %}
        {% else %}
          <li class="active">TAB</li>
        {% endif %}
      </ul>
      <div class="tab_content" style="--pc-number: {{ data.pc_number }};--wap-number: {{ data.wap_number }};">
        {% if section.blocks.size > 0 %}
          {% for block in section.blocks %}
            <ul class="tab_content_list {% if forloop.first == true %}active{% endif %}">
              {% if block.collection_checkbox.size > 0 %}
                {% assign collection_ids = block.collection_checkbox | get_array_values: 'id' | join: ',' %}
                {% get_collections ids = {collection_ids} limit=100 collection_image=1 %}
                {% for item in block.collection_checkbox %}
                  {% assign id = item.id %}
                  {% get_collection collections_id=item.id %}
                  {% if collections[id].size > 1 %}
                    {% assign collection = collections[id] %}
                    <li>
                      <a class="collection_pic" href="/collections/{{ collection.handle }}">
                        <div class="collection_img">
                          {%- if collection.image_alt == "" -%}
														{% assign collection_alt = collection | image_alt:'collection'   %}
													{%- else -%}
														{% assign collection_alt = collection.image_alt %}
													{%- endif -%}
                          <img
                            data-src="{{ collection.src |public_front_asset_url }}"
                            src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"
                            alt="{{ collection_alt  }}"
                          >
                        </div>
                        {% if data.show_album_title %}
                          <div class="collection_name">{{ collection.title }}</div>
                        {% endif %}
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}
              {% else %}
                {% for i in (1..6) %}
                  <li>
                    <a class="collection_pic" href="javascript:;">
                      <div class="collection_img">
                        <img
                          data-src=""
                          src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"
                          alt=""
                        >
                      </div>
                      {% if data.show_album_title %}
                        <div class="collection_name">title</div>
                      {% endif %}
                    </a>
                  </li>
                {% endfor %}
              {% endif %}
            </ul>
          {% endfor %}
        {% else %}
          <ul class="tab_content_list active">
            {% for i in (1..6) %}
              <li>
                <a class="collection_pic" href="javascript:;">
                  <div class="collection_img">
                    <img
                      data-src=""
                      src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"
                      alt=""
                    >
                  </div>
                  {% if data.show_album_title %}
                    <div class="collection_name">title</div>
                  {% endif %}
                </a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
  $(function() {
      {% if data.switch == '1' %}
          $('#block_album_tab-{{ blockId }} .tab_list li').on('click',function() {
              $(this).addClass('active').siblings().removeClass('active');
              setActiveItem($(this).index())
          })
      {% endif %}
      {% if data.switch == '2' %}
          $('#block_album_tab-{{ blockId }} .tab_list li').on('mouseenter', function() {
              $(this).addClass('active').siblings().removeClass('active');
              setActiveItem($(this).index())
          })
      {% endif %}
      function setActiveItem(index) {
          $('#block_album_tab-{{ blockId }} .tab_content_list').eq(index).addClass('active').siblings().removeClass('active');
      }
  })
</script>

{% schema %}
{
  "class": "block_album_tab",
  "is_global": false,
  "icon": "icon-zhuanjixuanxiangka",
  "name": {
    "zh_CN": "专辑选项卡",
    "en_US": "Album tab"
  },
  "max_blocks": 20,
  "blocks": [
    {
      "name": {
        "zh_CN": "分组",
        "en_US": "Group"
      },
      "type": "item",
      "settings": [
        {
          "type": "card_input",
          "label": {
            "zh_CN": "标题",
            "en_US": "Title"
          },
          "id": "title",
          "default": "TAB"
        },
        {
          "type": "card_collection",
          "label": {
            "zh_CN": "专辑多选",
            "en_US": "Multiple album selections"
          },
          "default": [],
          "card_type": "checkbox",
          "id": "collection_checkbox"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "id": "title",
      "default": ""
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "Short description"
      },
      "id": "detail",
      "default": ""
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满",
        "en_US": "Spread the width"
      },
      "id": "is_fill",
      "default": "0"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "展示专辑标题",
        "en_US": "Show album title"
      },
      "id": "show_album_title",
      "default": true
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "PC每排数量",
        "en_US": "PC number per row"
      },
      "id": "pc_number",
      "max": "8",
      "min": "2",
      "default": "6"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "移动端每排数量",
        "en_US": "Number of mobile terminals per row"
      },
      "id": "wap_number",
      "max": "4",
      "min": "1",
      "default": "2"
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "专辑切换方式",
        "en_US": "Collection Switching Mode"
      },
      "id": "switch",
      "option": [
        {
          "label": {
            "zh_CN": "鼠标点击",
            "en_US": "Mouse click"
          },
          "value": "1"
        },
        {
          "label": {
            "zh_CN": "鼠标移动",
            "en_US": "Mouse movement"
          },
          "value": "2"
        }
      ],
      "default": "1"
    },
    {
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
  ],
  "default": {
    "settings": {
      "title": "",
      "detail": "",
      "is_fill": false,
      "show_album_title": true,
      "pc_number": "6",
      "wap_number": "2",
      "switch": "2"
    },
    "blocks": [
      {
        "title": "TAB",
        "collection_checkbox": [],
        "block_type": "item"
      }
    ]
  }
}
{% endschema %}
